<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments :: head(~{::title})">
    <Title>分类页</Title>
</head>
    <body>
    <!-- 导航 -->
    <nav th:replace="fragments::menu(2)"></nav>

        <!-- 中间内容 -->
        <div class="me-padded-tb-large m-container-small">
          <div class="ui container">
                 <!-- header -->
                 <div class="ui top attached segment">
                               
                        <div class="ui two column grid middle aligned">
                            <div class="column">
                                <h3 class="ui header teal">分类</h3>
                            </div>
                            <div class="right aligned column">
                                   共 <h3 class="ui header orange
                                   me-inline-block" th:text="${typeCounts}">14</h3> 类
                            </div>
                        </div>
                </div>
                <!-- 标签框 -->
                <div  class="ui attached basic bottom  teal segment me-padded-tb-large me-border-hidden">
                        <div class="ui labeled button me-marrgin-top-large" tabindex="0" th:each="type : ${types}">

                            <div class="ui  button" th:classappend="${type.id==activeTypeId} ? 'blue'">
                                <i class="fork icon"></i> <span th:text="${type.name}"></span>
                            </div>
                            <a th:href="@{/types/{id}(id=${type.id})}" class="ui basic left pointing teal label" th:text="${type.blogSize}" >
                            40
                        </a>
                        </div>
                </div>
                <!-- 博客框 -->
              <!-- content 每篇博客内容 -->
              <div  class="ui attached   segment me-text ">
                  <div class="ui padded   segment me-padded-tb-big"  th:each="blog,iterStat : ${page.getRecords()}" >
                      <div class="ui mobile reversed  stackable grid">
                          <div class="eleven wide column" >
                              <!-- 博客标题 -->
                              <h3 class="ui header" >
                                  <a  href="#" th:href="@{/blog/{id}(id=${blog.id})}"  th:text="${blog.title} " STYLE="color: black" >
                                      博客标题
                                  </a>
                              </h3>
                              <!-- 博客内容 -->
                              <p  th:text="|${blog.description}......|">诗延绵千年而不绝，歌咏千年而不息，就是因为诗歌自身</p>
                              <div class="ui grid">
                                  <!-- 用户基本信息 -->
                                  <div class="eleven wide column">
                                      <div class="ui mini horizontal link list">
                                          <div class="item">
                                              <img src="../static/image/1.png" th:src="${blog.user.avatar}" alt="" class="ui avatar image">
                                              <div class="content">
                                                  <a href="#"><div class="header" th:text="${blog.user.nickname}">杨瑞卿</div></a>
                                              </div>
                                          </div>
                                          <div class="item" >
                                              <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd HH:mm:ss')}">2020-3-26</span>
                                          </div>
                                          <div class="item" >
                                              <i class="eye icon"></i> <span th:text="${blog.views}">9999</span>
                                          </div>
                                      </div>
                                  </div>
                                  <!-- 标签label -->
                                  <div class="right aligned five wide column" >
                                      <a href="#" class="ui basic teal label me-padded-mini" th:each=" tag:${blog.tags}">
                                          <span th:text="${tag.name}">方法论</span>
                                      </a>
                                  </div>
                              </div>
                          </div>
                          <!-- 文章图片 最好是800width 400height -->
                          <div class="five wide column">
                              <a href="" th:href="@{/blog/{id}(id=${blog.id})}" >
                                  <img width="200" height="100" src="https://i.picsum.photos/id/961/300/200.jpg" alt="" class="ui rounded bordered fluid"
                                       th:src="@{${blog.firstPicture}}" style="max-width: 100%; height: auto">
                              </a>
                          </div>
                      </div>
                  </div>
              </div>


              <!-- footer -->
              <div class="ui bottom attached segment" th:if="${page.pages>1}">
                  <div class="ui two column grid middle aligned"  >
                      <div class="column">
                          <a th:href="@{'/types/'+${activeTypeId}(page=${page.getCurrent()}-1)}" class="ui teal button" th:if="${page.hasPrevious()}">上一页</a>
                      </div>
                      <div class="right aligned column ">
                          <a th:href="@{'/types/'+${activeTypeId}(page=${page.getCurrent()}+1)}"  class="ui teal button" th:if="${page.hasNext()}">下一页</a>
                      </div>
                  </div>
              </div>
          </div>
        </div>

    <footer th:replace="fragments::footer"></footer>


    <!-- 引入js脚本 -->
    <!--/*/<th:block th:replace="fragments :: script">/*/-->
    <!--/*/</th:block>/*/-->

        <script>
            // 手机端点击显示导航栏
         $(".menu.toggle").click(function () {
            $(".me-item").toggleClass("me-mobile-hide");
         });
        </script>
    </body>
</html>